<template>
  <div class="login-layout-bg">
    <!-- vue2 ,在template里面，必须有一个根元素 -->
    <transition name="slide-fade">
      <div class="login-form-layout" v-if="isShow">
        <h3>{{ title }}</h3>
        <div>
          <input type="text" v-model="phone">
        </div>
        <div>
          <input type="password" v-model="password">
        </div>
        <div>
          <el-button type="success" @click="loginHandler">LOGIN</el-button>
        </div>
        <div>
          <el-button type="warning" @click="findMima">找回密码 </el-button>
        </div>

      </div>
    </transition>
    <transition name="slide-fade">
      <div class="login-form-layout" v-if="!isShow">
        <h1>找回密码</h1>
        <div>
          <input type="text" v-model="username">
        </div>
      </div>
    </transition>
  </div>
</template>
<script>
import { login } from "@/config/api"
// 每一组件，必须默认公开一个vue实例化对象
export default {
  name: 'LoginView',
  data() {
    return {
      title: '四川省智能水务管理系统',
      phone: '1',
      password: '1',
      isShow: true,
    }
  },
  // 1 props类型验证的写法：
  props: {
    loginState: Boolean, // 直接定义props的属性名, 使用和data选项里面的属性一样使用。
  },


  methods: {
    findMima() {
      this.isShow = false;
    },
    loginHandler() {
      /*  this.$http({
         url: "/api/water/admin/login",
         method: 'post',
         params: { "password": this.password, 'phone': this.phone }
       })
         .then(res => {
           console.log(res);
         }) */
      login({ "password": this.password, 'phone': this.phone })
        .then(res => {
          console.log(res)
          if (res.data.code === 200) {
            // element-ui的弹框
            this.$message({
              type: 'success',
              message: '登录成功'
            });
            // 存储token:
            sessionStorage.token = res.data.data.Authorization;

            this.$router.push("/home")
          } else {
            this.$message({
              type: 'error',
              message: '登录失败'
            })
          }
        })
        .catch(err => {
          // console.log(err)
          this.$message({
            type: 'error',
            message: '服务器异常'
          })
        });

      // if (this.username === 'admin' && this.password === '123456') {
      //   //  跳路由
      //   // this.$router("/home")
      //   // console.log(this.$route); //{}
      //   // console.log(this.$router); // {}

      //   sessionStorage.setItem('loginState', "1")

      //   this.$router.push("/home")
      // }
    }
  },
  // beforeDestroy() {
  //   console.log('login beforeDestroy');
  // },
  // destroyed() {
  //   console.log("login destroyed");
  // },
  // beforeRouteLeave(to, from, next) {
  //   console.log("login beforeRouteLeave")
  //   next()
  // }
}
</script>
<!-- lang="less": 使用less做css的预编译语言。 scoped ： 局部的样式表。-->
<style lang="less" scoped>
.login-layout-bg {
  width: 100%;
  height: 100%;
  background-image: url("./../../assets/login-bg.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.login-form-layout {
  width: 400px;
  height: 300px;
  background-color: #ffffff8e;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  border-radius: 5px;

  //&，表示当前选择器 , 可以省略
  // >, 编译位子元素选择器
  &>h3 {
    margin: 20px 0;
    font-size: 1.5rem;
  }

  //  “ ” 空格表示后代
  & input {
    width: 80%;
    height: 40px;
    margin: 20px;
    outline: 0;
    border: 1px solid gray;
    border-radius: 3px;
    text-indent: 10px;
  }

  button {
    width: 80%;
    height: 40px;
    // background-color: #11a811;
    // outline: 0;
    // border: 0px solid gray;
    // border-radius: 3px;
    cursor: pointer;
    color: white;
  }
}

.slide-fade-enter-to {
  opacity: 1;
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}

.slide-fade-enter {

  opacity: 0;
  transition: all .3s ease;
}
</style>